<template>
	<view class="general_background">
		<view class="top">
			<image :src="businessData.image" mode=""></image>
			<view class="business">
				<view class="place">
					<view class="place-w">
						<text class="business-name">{{businessData.name}}</text>
						<text>{{businessData.area}}</text>
					</view>
					<image src="../../../static/img/1.jpg" mode=""></image>
				</view>
				<view class="Sales">
					<u-icon name="star-fill" color="#f66309"></u-icon>
					<text>3分</text>
					<text class="sold">月销量14</text>
				</view>
				<!-- <text class="number">用餐人数：1人</text> -->
				<!-- <view class="Jump">
					<text>点餐</text>
					<text>商家</text>
					<text>评价</text>
				</view> -->
			</view>
		</view>
		<view class="middle">
			<view class="location">
				<view class="location-m">
					<u-icon name="map" size="40rpx"></u-icon>
					<text class="location-word">{{businessData.position}}</text>
				</view>
				<view class="phone">
					<view class="phone-u-icon">
						<u-icon name="phone" size="50rpx" color="black"></u-icon>
					</view>
				</view>
			</view>
			<view class="photo" >
				<image :src="item" v-for="item in swipers" :key="item.id"></image>
			</view>
		</view>
		<view class="distribution">
			<view class="delivery-service">
				<view class="delivery-service">
					<u-icon name="account" size="40rpx" color="black"></u-icon>
					<text>配送服务</text>
				</view>
				<text>商家配送</text>
			</view>
			<view class="delivery-service time">
				<view class="delivery-service time">
					<u-icon name="clock" size="40rpx" color="black"></u-icon>
					<text>营业时间</text>
				</view>
				<text>{{businessData.beginTime}}-{{businessData.endTime}}</text>
			</view>
		</view>
		<view class="merchant-services">
			<view class="merchant-services-above">
				<u-notice-bar mode="horizontal" :text="text1" bg-color="#fff" autoplay="true" speed="100" volume-size="40rpx"></u-notice-bar>
			</view>
			<view class="merchant-services-under">
				<view class="merchant-services-a">
					<u-icon name="checkmark-circle" size="40rpx" color="black"></u-icon>
					<text>商家服务</text>
				</view>
				<view class="merchant-services-b">
					<u-icon name="hourglass" size="40rpx" color="black"></u-icon>
					<text>到店自取</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { BusinessDetail } from '@/common/http.api.js'
	export default {
		data() {
			return {
				businessData: {},
				text1: '尊敬的各位客户，本店国庆期间正常营业，欢迎大家前来就餐~',
				swipers:[]
			}
		},
		onLoad() {
			BusinessDetail().then( res => {
				this.businessData = res.rows[0]
				this.swipers = this.businessData.nearImage.split(",")
				console.log(this.swipers)
			})
		}
	}
</script>

<style scoped>
	.general_background {
		width: 100%;
		background-color: #f7f8fc;
		border-bottom: 1rpx solid #f7f8fc;
	}

	.general_background .top {
		width: 100%;
		/* height: 502rpx; */
		position: relative;
	}

	.general_background .top image {
		width: 100%;
		height: 400rpx;
	}

	.general_background .top .business {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		border: 1rpx solid #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.general_background .top .business .place {
		display: flex;
		margin: 20rpx;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.general_background .top .business .place text {
		display: block;
		margin-bottom: 5rpx;
	}

	.general_background .top .business .place image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.business-name {
		font-size: 40rpx;
		font-weight: bold;
	}

	.general_background .top .business .Sales {
		margin-left: 20rpx;
		margin-top: 5rpx;
		font-size: 30rpx;
		margin-bottom: 5rpx;
		color: #f66309;
		display: flex;
	}

	.general_background .top .business .Sales .sold {
		margin-left: 20rpx;
		font-size: 20rpx;
		color: #8a8a8a;
		margin-top: 10rpx;
	}

	.general_background .top .business .number {
		margin-left: 20rpx;
		font-size: 25rpx;
	}

	.general_background .top .business .Jump {
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		width: 90%;
		margin: 0 auto;
		color: black;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.general_background .middle {
		width: 100%;
		height: 330rpx;
		background-color: #fff;
		/* margin-top: 20rpx; */
		border: 1rpx solid #fff;
		/* position: absolute; */
	
	}

	.general_background .middle .location-word {
		font-size: 28rpx;
		width: 90%;
		margin-left: 20rpx;
	}

	.general_background .middle .location .location-m {
		display: flex;
	}

	.general_background .middle .location {
		display: flex;
		height: 80rpx;
		margin: 20rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #dcdcdc;
		padding-bottom: 10rpx;
	}

	.general_background .middle .location .phone {
		height: 60rpx;
		width: 100rpx;
		margin: 10rpx 0;
		border-left: 1rpx solid #dcdcdc;
		position: relative;
	}

	.general_background .middle .location .phone .phone-u-icon{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.general_background .middle .photo {
		width: 100%;
		height: 100%;
		height: 140rpx;
		margin: 0 20rpx;
		display: flex;
		
	}

	.general_background .middle .photo image {
		width: 200rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.general_background .distribution {
		height: 200rpx;
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		border: 1rpx solid #fff;
	}

	.general_background .distribution .delivery-service {
		height: 98rpx;
		margin: 0 20rpx;
		display: flex;
		background-color: #fff;
		line-height: 98rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #dcdcdc;
		font-size: 28rpx;
	}

	.general_background .distribution .delivery-service text {
		margin-right: 10rpx;
	}

	.general_background .distribution .time {
		border: none;
	}

	.general_background .merchant-services {
		height: 200rpx;
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		border: 1rpx solid #fff;
		margin-bottom: 100rpx;
	}

	.general_background .merchant-services .merchant-services-above {
		height: 78rpx;
		margin: 10rpx 20rpx;
	}
/* .general_background .merchant-services .merchant-services-above .u-notice-bar{
	background-color: #fff;
	color: red;
} */
	.general_background .merchant-services .merchant-services-under {
		height: 98rpx;
		margin: 0 40rpx;
		display: flex;
		background-color: #fff;
		line-height: 98rpx;
		font-size: 28rpx;
	}

	.general_background .merchant-services .merchant-services-under .merchant-services-a {
		display: flex;
		margin-right: 30rpx;
	}

	.general_background .merchant-services .merchant-services-under .merchant-services-a text {
		margin-right: 10rpx;
	}

	.general_background .merchant-services .merchant-services-under .merchant-services-b {
		display: flex;
	}

	.general_background .merchant-services .merchant-services-under .merchant-services-b text {
		margin-right: 10rpx;
	}
</style>
